<template>
	<view class="nc-payment-content">
		<!-- <view class="payment-amount"> -->
			
<!-- 			<view>
				<view>
					订单编号:1111111
				</view>
				<view>
					创建实现2021-03-03
				</view>
			</view>
			
			<text class="amount-tit">支付金额</text>
			<view class="amount-num">
				￥
				<text>300</text>
			</view> -->
			<!-- <view class="amount-desc">
				<text>{{ payInfo.pay_body }}</text>
			</view> -->
		<!-- </view> -->
		
		<view style="background-color: #FFFFFF;width: 350px;margin: 0 auto;margin-top: 30rpx;">
			
			<view style="display: flex;align-items: center;justify-content: space-around;">
				<view style="display: flex;align-items: center;">
					<image :src="orderSrc" style="width: 200rpx;height: 200rpx;margin-top: 10rpx;"></image>
				</view>
				
				<view style="margin-left: 40rpx;">
					<view>订单编号:{{orderNo}}</view>
					<view style="margin-top: 10px;">创建时间:{{orderTime}}</view>
				</view>
			
			</view>
			
			<view style="text-align: center;font-weight: bold;">
				<view>
			支付金额:
			</view>
			<view>
			300.00元
			</view>
			</view>
			<view style="text-align: center;font-weight: bold;color: red;">铺货时间到了请支付铺货押金</view>
			
		</view>

		<radio-group class="" @change="RadioChange">
			<!-- #ifdef H5 -->
		<view class="payment-balance">
			<view class="" style="font-size: 32rpx;color: #333;">余额支付￥{{ balance }}</view>
			<radio :class="radio=='A'?'checked':''" :checked="radio=='A'?true:false" value="A"></radio>
		</view>
			<!-- #endif -->

			
			<view class="payment-balance">
				<view class="" style="font-size: 32rpx;color: #333;display: flex;align-items: center;">微信
					<image src="../../../static/weixin.png" mode=""
						style="width: 50rpx; height: 50rpx; margin-left: 20rpx;"></image>
				</view>
				<radio class='radio' :class="radio=='C'?'checked':''" :checked="radio=='C'?true:false" value="C">
				</radio>
			</view>
			<view class="payment-balance">
				<view class="" style="font-size: 32rpx;color: #333;display: flex;align-items: center;">支付宝
					<image src="../../../static/zhifub.png" mode=""
						style="width: 50rpx; height: 50rpx; margin-left: 20rpx;"></image>
				</view>
				<radio class='radio' :class="radio=='B'?'checked':''" :checked="radio=='B'?true:false" value="B">
				</radio>
			</view>
		</radio-group>
		<button type="primary" class="payment-btn" :class="isIphoneX ? 'payment-bottom' : ''"
			@click="pay2()">确认支付</button>
		<web-view :src="payUrl" v-if="payUrl != ''"></web-view>

		<ns-login ref="login" href="pay"></ns-login>
	</view>
</template>

<script>
	import http from 'common/js/http.js';
	import {
		Weixin
	} from 'common/js/wx-jssdk.js';
	import loadingCover from '@/components/loading/loading.vue';
	import nsLogin from 'components/ns-login/ns-login.vue';

	export default {
		components: {
			loadingCover,
			nsLogin
		},
		data() {
			return {
				orderTime:"",
				orderNo:"",
				orderSrc:"",
				showText:false,
				radio: 'C',
				outTradeNo: '',
				payInfo: {},
				payType: 0,
				payTypeList: [],
				isUseBalance: true,
				balance: 0,
				payUrl: [],
				flag: false, //防重复标识
				isIphoneX: false, //判断手机是否是iphoneX以上
				payMoney: 0,
				forcePayType:""
			};
		},
		onBackPress(options) {
				console.log("666666666666666666",this.forcePayType)
				// #ifdef APP
				if(this.forcePayType){
					if (uni.getSystemInfoSync().platform == 'ios') {
						plus.ios.import("UIApplication")
							.sharedApplication().performSelector(
								"exit")
					} else if (uni.getSystemInfoSync().platform ==
						'android') {
						plus.runtime.quit();
					}
				}
				// #endif

			var pages = getCurrentPages();
			var page = pages[pages.length - 2];
			if (page.route.indexOf('pages/member/recharge/recharge') == -1) {
				this.$util.redirectTo('/pages/order/list/list', {
					status: 0
				});
				return true;
			}
		},
		onLoad(option) {
			
			this.forcePayType=option.payType
			
			console.log(option.payType)
			this.getOrder()
			if (option.out_trade_no) this.outTradeNo = option.out_trade_no;
			console.log("this.outTradeNothis.outTradeNo======================",this.outTradeNo)
			// console.log("this.outTradeNo===============",this.outTradeNo)
			uni.getSystemInfo({
				success: res => {
					if (res.model.search('iPhone X') != -1) {
						this.isIphoneX = true;
					}
				}
			});
		},
		onHide() {
			this.flag = false;
		},
		methods: {
			
			getOrder(){
				this.sendRequest({
					url: 'System.Order.orderph',
					success: res => {
						
						console.log("data11111111==============",res.data)
						let data = res.data.data;
							this.orderTime=this.$util.timeStampTurnTime(data[0].create_time);
							this.orderNo=data[0].order_no;
							this.orderSrc="https://yiyaoapp.xihewh.com/"+data[0].order_item_list[0].picture.pic_cover;
							console.log(this.orderSrc)
					}
				
				})
			},
			RadioChange(e) {
				this.radio = e.detail.value
				console.log('选择的是', this.radio)
			},
			pay2() {
				console.log('调起支付')

				// if (this.flag) return;
				// this.flag = true;
				// this.myPay();
				this.myPay1();
			},
			myPay1() {
				if (this.radio == 'A') {
					console.log('我选择的是余额支付', this.radio)
					this.sendRequest({
						url: 'System.Pay.orderBindBalance',
						data: {
							out_trade_no: this.outTradeNo,
							type: this.payTypeList[this.payType].provider,
							is_uniapp: 1,
							is_use_balance: 1
						},
						success: res => {
							console.log('res', res)
							let data = res.data;
							if (data.code == 1) {
								this.$util.redirectTo('/pages/order/list/list');
								return false;
							} else if (data.code == 0) {
								return true;
							} else if (data.code < 0) {
								this.$util.showToast({
									title: data.message
								});
								return false;
							}
						}

					})
				} else if (this.radio == 'B') {
					console.log('我选择的是支付宝支付', this.radio)
					this.myPay()
				}else if (this.radio == 'C') {
					console.log('我选择的是微信支付', this.radio)
					this.myweixinPay()
				}
				
				 else {
					console.log('我没选择', this.radio)
					uni.showToast({
						title: '请选择一种支付方式',
						icon: 'none'
					})
				}
			},
			//微信支付
			myweixinPay(){
				console.log("22222222222")
				// out_trade_no
				var outTradeNo= this.outTradeNo
				
				// console.log('进来了',aa,bb)
				plus.share.getServices(function(res) {
					var sweixin = null;
					for (var i = 0; i < res.length; i++) {
						var t = res[i];
						if (t.id == 'weixin') {
							sweixin = t;
						}
					}
					if (sweixin) {
						uni.switchTab({
							url:'/pages/member/index/index'
						})
						sweixin.launchMiniProgram({
							id: "gh_274c705e941b",// 小程序原始id
							path: "pages/shouPay/shou?outTradeNo="+outTradeNo ,//页面路径加参数	
							type: 0,// 0-正式版； 1-测试版； 2-体验版。 默认值为0
						});
					}else {
						plus.nativeUI.alert('当前环境不支持微信操作!');
					}
				}, function(res) {
					console.log(JSON.stringify(res));
				});
			},
			myPay() {
				console.log("this.outTradeNothis.outTradeNo======================",this.outTradeNo)
				this.sendRequest({
					url: 'System.Pay.onlinepPay',
					data: {
						out_trade_no: this.outTradeNo,
					},
					success: res => {
						console.log('res支付接口onlinePay=', res)
						if (res.code == 0) {
							let data = res.data.data;
							if (res.data) {
								uni.requestPayment({
									"provider": 'alipay',
									"orderInfo": res.data.replace(/amp;/g, ""),
									success: res => {
										console.log('成功')
										this.$util.redirectTo('/pages/order/list/list');
									},
									fail: res => {
										console.log('失败')
										this.flag = false;
										if (res.errMsg == 'requestPayment:fail cancel') {
											this.$util.showToast({
												title: '您已取消支付'
											});
										} else {
											uni.showModal({
												content: '支付失败,失败原因: ' + res.errMsg,
												showCancel: false
											});
										}
										this.$util.redirectTo('/pages/order/list/list');
									}
								});
							}
						} else {
							this.$util.showToast({
								title: res.message
							});
							this.flag = false;
						}
					}
				});
			},

			pay() {
				if (this.flag) return;
				this.flag = true;
				this.h5Pay();
				// this.mpPay();
			},

			useBalance(e) {
				this.isUseBalance = e.detail.value;
			},
		},
		onShow() {
			var isLogin = false;
			getApp().checkLogin(() => {
				isLogin = true;
				setTimeout(() => {
					this.$refs.login.clickLogin();
				}, 100);
			});
		},
		mixins: [http]
	};
</script>

<style lang="scss">
	page {
		overflow: hidden;
	}

	@mixin flex-column {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	@mixin flex-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.payment-amount {
		@include flex-column;
		margin: $ns-margin;
		border-radius: 8rpx;
		padding: 20rpx 0;
		background-color: #fff;

		.amount-tit {
			font-size: $ns-font-size-base;
		}

		.amount-num {
			margin: 10rpx 0;

			text {
				font-size: $ns-font-size-lg + 24rpx;
			}
		}

		.amount-desc {
			font-size: $ns-font-size-base;
			color: $ns-text-color-gray;
			padding: 0 40rpx;
			width: 100%;
			box-sizing: border-box;
			text-align: center;

			text {
				width: 100%;
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}

	.payment-balance {
		@include flex-row;
		margin: $ns-margin;
		border-radius: 8rpx;
		padding: 0 30rpx;
		height: 104rpx;
		background-color: #fff;
		font-size: $ns-font-size-lg;

		.balance-num {
			margin-left: 6rpx;
			margin-right: auto;
		}
	}

	.payment-style {
		margin: $ns-margin;
		border-radius: 8rpx;
		padding: 0 30rpx 20rpx;
		background-color: #fff;

		.style-tit {
			height: 84rpx;
			line-height: 84rpx;
			font-size: $ns-font-size-lg;
			color: $ns-text-color-gray;
		}

		.style {
			@include flex-row;
			height: 104rpx;

			.pic {
				font-size: 50rpx;
			}

			.iconweixinzhifu {
				color: #24af41;
			}

			.iconzhifubaozhifu- {
				color: #00a0e9;
			}

			text {
				margin-left: 20rpx;
				margin-right: auto;
				font-size: $ns-font-size-lg;
			}
		}
	}

	.payment-btn {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0;
		height: 90rpx;
		line-height: 90rpx;
		font-size: $ns-font-size-base;
		border-radius: 0;
		font-size: $ns-font-size-lg;
	}

	.payment-bottom {
		bottom: 68rpx !important;
	}
</style>
